feat: #99 Improve tournament competitor edit dialog#104
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update refines player slot management and validation in tournament competitor forms. It introduces dynamic player slot addition, filters out players without user IDs during submission, and improves scrollability in dialogs. Visibility conditions for competitor actions are simplified, and style and schema logic are streamlined for better maintainability. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TournamentCompetitorForm
participant TournamentCompetitorEditDialog
participant API
User->>TournamentCompetitorForm: Clicks "Add Player Slot"
TournamentCompetitorForm->>TournamentCompetitorForm: Appends new inactive player slot
User->>TournamentCompetitorForm: Fills form and submits
TournamentCompetitorForm->>TournamentCompetitorForm: Filters out players without userId
TournamentCompetitorForm->>TournamentCompetitorEditDialog: Passes filtered data
TournamentCompetitorEditDialog->>API: Sends update request with valid players only
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/TournamentCompetitorEditDialog/TournamentCompetitorEditDialog.tsx (1)
30-34: Consider removing duplicate player filtering logic.The filtering logic here duplicates what's already implemented in
TournamentCompetitorForm.handleSubmit(line 113 in the form component). Both locations filter out players withoutuserId.While defensive programming can be beneficial, this duplication may lead to maintenance overhead. Consider whether the filtering is necessary at both levels.
If you want to keep the filtering for defensive purposes, consider adding a comment explaining why it's intentionally duplicated:
const handleSubmit = (formData: TournamentCompetitorSubmitData): void => { if (!data) { return; } const { players, ...restData } = formData; + // Defensive filtering - form already filters, but ensuring no empty players reach the API updateTournamentCompetitor({ id: data?.tournamentCompetitor._id, ...restData, players: players.filter((player) => player.userId), }); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/components/TournamentCompetitorEditDialog/TournamentCompetitorEditDialog.tsx(2 hunks)src/components/TournamentCompetitorForm/TournamentCompetitorForm.module.scss(1 hunks)src/components/TournamentCompetitorForm/TournamentCompetitorForm.schema.ts(2 hunks)src/components/TournamentCompetitorForm/TournamentCompetitorForm.tsx(6 hunks)src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/TournamentCompetitorEditDialog/TournamentCompetitorEditDialog.tsx (1)
src/components/TournamentCompetitorForm/TournamentCompetitorForm.tsx (1)
TournamentCompetitorForm(49-192)
🔇 Additional comments (16)
src/components/TournamentCompetitorForm/TournamentCompetitorForm.module.scss (1)
15-17: LGTM! Clean CSS implementation for the full-width button.The grid-column spanning rule correctly positions the "Add Player Slot" button to span both the Active and User columns in the players grid.
src/components/TournamentCompetitorEditDialog/TournamentCompetitorEditDialog.tsx (2)
7-7: Good UX improvement with ScrollArea.Adding ScrollArea enables better handling of long player lists in the dialog.
41-49: ScrollArea implementation enhances form usability.Wrapping the form in ScrollArea improves the user experience when dealing with tournaments that have many player slots.
src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx (3)
79-79: Good refactoring to remove redundant user checks.The explicit
user &&check was redundant sinceisPlayeralready verifies user existence. The change also improves the status check by using an array for better readability.
84-84: Correctly simplified visibility condition.Removing the redundant
user &&check is appropriate since bothisOrganizerandisPlayeralready verify user existence.
89-89: Redundant user check properly removed.The
user &&check was unnecessary sinceisOrganizeralready includes user validation.src/components/TournamentCompetitorForm/TournamentCompetitorForm.tsx (8)
1-1: MouseEvent import added for proper event handling.Good addition for the new
handleAddPlayerevent handler.
11-11: Appropriate imports for the new Add Player Slot functionality.Plus icon and Button component are correctly imported for the new dynamic player slot feature.
Also applies to: 19-19
76-76: Correctly added append method for dynamic player management.The
appendmethod fromuseFieldArrayis properly destructured to support adding new player slots.
102-108: Well-implemented handleAddPlayer function.The logic correctly:
- Prevents default form submission behavior
- Appends new player slots with appropriate default values
- Sets active status based on current active player count vs competitor size
- Initializes with empty userId for user selection
110-116: Good practice filtering out incomplete players.Filtering players without
userIdbefore submission prevents submitting incomplete data and aligns with the form's validation logic.
125-125: Smart calculation for managing empty slots.The
emptyPlayerSlotscalculation effectively tracks unfilled player slots, enabling proper button state management.
146-146: Excellent defensive programming with optional chaining.The optional chaining (
players[i]?.active ?? falseandplayers[i]?.userId) prevents potential runtime errors when accessing player data.Also applies to: 152-152
160-168: Well-designed Add Player Slot button implementation.The button implementation demonstrates good UX practices:
- Proper styling class application
- Smart disable logic (prevents adding when loading or empty slots exist)
- Clear visual design with Plus icon and descriptive text
- Proper event handling
src/components/TournamentCompetitorForm/TournamentCompetitorForm.schema.ts (2)
20-33: Excellent refactoring of validation logic.The simplified validation conditions are more readable and maintainable:
- Combined separate if statements into clearer conditional blocks
- Improved error message consistency and clarity
- Maintained the same validation logic while reducing code complexity
50-56: Great refactoring to a concise and readable function.The new implementation is much cleaner:
- Eliminates complex conditional logic and loops
- Uses modern JavaScript features (optional chaining, array methods)
- Maintains the same functionality while being more maintainable
- Returns only existing competitor players instead of pre-filling empty slots
This aligns well with the dynamic slot addition feature in the form component.
ianpaschal
deleted the
feat-99-make-tournament-competitor-composition-more-flexible
branch
* Update update-project-status.yml * Update updateProjectStatus.js * fix: Toast text does not wrap (#87) * fix: #86 Sanitize sign in/sign up inputs (#91) * feat: #32 Auto generate avatars & refactor users (#90) * feat: Improve <TournamentDetailPage/> default tab * feat: Improve <TournamentCard/> styling * Update mockData.ts * feat: Improve <AccordionItem/> disabled state (#97) #94 * feat: Hide completed pairings from match check-in (#96) #95 * bug: Preserve <TournamentPairingsGrid/> internal state (#98) #93 * feat: #101 Add player count to roster (#103) * feat: Show full player names when tournaments require it * feat: Add activePlayerCount to deep tournaments * feat: Sort tournament competitors by name * task: #100 Clean-up .card mixin (#102) * feat: #99 Improve tournament competitor edit dialog (#104) * feat: #106 Improve signIn error handling (#107) * Update convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts * Update convex/_model/users/_helpers/checkUserTournamentForcedName.ts * feat: Hide players with 0 matches from rankings
* Update update-project-status.yml * Update updateProjectStatus.js * fix: Toast text does not wrap (#87) * fix: #86 Sanitize sign in/sign up inputs (#91) * feat: #32 Auto generate avatars & refactor users (#90) * feat: Improve <TournamentDetailPage/> default tab * feat: Improve <TournamentCard/> styling * Update mockData.ts * feat: #94 Improve <AccordionItem/> disabled state (#97) * feat: #95 Hide completed pairings from match check-in (#96) * bug: #93 Preserve <TournamentPairingsGrid/> internal state (#98) * feat: #101 Add player count to roster (#103) * feat: Show full player names when tournaments require it * feat: Add activePlayerCount to deep tournaments * feat: Sort tournament competitors by name * task: #100 Clean-up .card mixin (#102) * feat: #99 Improve tournament competitor edit dialog (#104) * feat: #106 Improve signIn error handling (#107) * Update convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts * Update convex/_model/users/_helpers/checkUserTournamentForcedName.ts * feat: Hide players with 0 matches from rankings * feat: #112 Add more mercenary team options (#113) * feat: #110 Add manual table assignments (#111) * fix: Ensure round 0 rankings can be included * Refactor tournament actions (#114) * refactor: Improve tournament actions * chore: Clean-up Convex errors * fix: Do not try to clean up current round timer on tournament end * fix: Don't allow players to be removed from tournament * chore: Update test tournament banner image * Update TournamentCard.tsx * fix: Ensure round 0 rankings can be included * fix: Fix end tournament round context menu behavior * chore: Improve mock match result creation * feat: Allow matchResult.playedAt to be date string or number * feat: #115 Hide match result battle plans (#116) * feat: Set page title based on <PageWrapper/> title prop * fix: Use <IdentityBadge/> to fix player name spacing on match results * fix: Correctly include match results relevant to a tournament
* Update update-project-status.yml * Update updateProjectStatus.js * fix: Toast text does not wrap (#87) * fix: Sanitize sign in/sign up inputs (#91) #86 * feat: #32 Auto generate avatars & refactor users (#90) * feat: Improve <TournamentDetailPage/> default tab * feat: Improve <TournamentCard/> styling * Update mockData.ts * feat: Improve <AccordionItem/> disabled state (#97) #94 * feat: Hide completed pairings from match check-in (#96) #95 * bug: Preserve <TournamentPairingsGrid/> internal state (#98) #93 * feat: #101 Add player count to roster (#103) * feat: Show full player names when tournaments require it * feat: Add activePlayerCount to deep tournaments * feat: Sort tournament competitors by name * task: Clean-up .card mixin (#102) #100 * feat: #99 Improve tournament competitor edit dialog (#104) * feat: #106 Improve signIn error handling (#107) * Update convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update convex/_model/users/_helpers/checkUserTournamentForcedName.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: Hide players with 0 matches from rankings * feat: #112 Add more mercenary team options (#113) * feat: #110 Add manual table assignments (#111) * fix: Ensure round 0 rankings can be included * Refactor tournament actions (#114) * refactor: Improve tournament actions * chore: Clean-up Convex errors * fix: Do not try to clean up current round timer on tournament end * fix: Don't allow players to be removed from tournament * chore: Update test tournament banner image * Update TournamentCard.tsx * fix: Ensure round 0 rankings can be included * fix: Fix end tournament round context menu behavior * chore: Improve mock match result creation * feat: Allow matchResult.playedAt to be date string or number * feat: #115 Hide match result battle plans (#116) * feat: Set page title based on <PageWrapper/> title prop * fix: Use <IdentityBadge/> to fix player name spacing on match results * fix: Correctly include match results relevant to a tournament * feat: #57 Implement basic dashboard (#119) * fix: Remove double border on dashboard sections * fix: Add key to dashboard tournaments * feat: Improve <TournamentPairingRow/> styling * fix: Remove extraneous error message * fix: Improve <Form/> isDirty calculation * fix: Render all competitors in <TournamentCompetitorForm/> * fix: Also show empty state if rankings are empty --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Style
Refactor